用Claude Code编写云计算案例集锦和搜索网站

SCQA：从需求到上线，71分钟完成3天的工作

11月20日下午3点，我需要为团队搭建一个云计算案例搜索网站，包含关键词搜索、案例库管理、历史记录查询等功能。传统外包报价是3天工期，费用约8000元。但我决定尝试用Claude Code来完成——用一份简洁的配置文档驱动AI开发。冲突在于，这不是简单的静态页面，而是包含后端接口、实时推送、数据存储、分页管理等功能的完整系统。问题是：AI能否理解需求的完整性，并交付生产级代码？答案令人惊喜：从15:17第一次提交到16:28最终上线，71分钟完成3400行代码，系统成功部署到https://search.linapp.fun，节省了97.6%的开发时间。

一、极简配置：222字节驱动整个项目

我在项目根目录放了一个CLAUDE.md文件，只有4条规则：使用中文对话、用最简单的方法完成任务、非必要不创建新文件、按目录分类存放文件。这222字节的配置文件，就是整个项目的"宪法"。这正是我在《亚马逊六页纸》中提到的"约束即自由"理念——清晰的边界反而释放了AI的创造力。

初始需求用自然语言描述：需要一个支持两种搜索模式的网站——关键词搜索和结构化案例搜索（按云厂商、行业、技术筛选）。Claude Code接收后，自主完成了技术选型：后端用FastAPI构建接口，前端用原生JavaScript，数据存储选JSON文件而非数据库，部署方案选Nginx。这些选择既务实又高效，JSON文件避免了数据库配置，FastAPI保证了接口性能，原生JS减少了前端依赖。

二、71分钟的7次迭代

15:17 - 第一次提交（v2.0）：Claude Code一次性生成11个文件共2413行代码，包含完整功能框架。令我惊讶的是，它自主设计了Akamai企业配色方案（红色#EE3124），使界面呈现专业的视觉效果。系统具备实时流式搜索、20秒倒计时、5个进度里程碑、历史记录功能、价格计算等核心特性。

15:43 - 自我修复（v2.1）：26分钟后，Claude发现了自己代码中的语法错误，立即提交修复版本。这个细节展示了AI的自我纠错能力——它不需要人工调试，就能发现并修正问题。这是我第一次没有介入，完全由Claude自主完成的修复。

15:43-15:53 - 体验优化：我提出了三个需求——更新页面标题、改进链接可点击性、新增删除功能。Claude在10分钟内完成了这三次提交。其中删除功能的实现包含前端按钮、确认对话框、后端接口、数据清理等完整流程，展现了对业务逻辑的理解。

16:24-16:28 - 功能重组：我提出调整tab顺序，将案例搜索放在最前面。这涉及前端索引、事件绑定、默认显示等多处协调修改，Claude在2分钟内完成1149行代码的重构。最后一个需求是新增"案例集锦"tab，Claude仅用1分钟完成262行新代码，并将"历史记录"改名为"关键词搜索记录"，保证了术语的一致性。

三、成果与价值：3400行生产级代码

最终交付的系统包含前端2404行、后端996行，共3400行代码。功能清单：4个tab页面（案例搜索、案例集锦、关键词搜索、记录查询）、实时推送搜索结果、进度动画、卡片式历史展示（每页20条）、统计仪表盘（累计搜索、Token使用、参考链接、费用）、完整的Markdown渲染。

系统已部署到生产环境，通过Nginx反向代理提供HTTPS服务，使用Systemd管理进程实现开机自启。数据存储采用JSON文件，搜索历史按关键词自动分类，案例搜索单独存储在cases目录。集成了Kimi AI大模型（定价¥0.024/千字符），每次搜索自动计算Token消耗和费用。

四、亮点与暗点

亮点1：架构设计的合理性。Claude自主选择JSON文件存储而非数据库，这个决策非常适合场景——搜索历史本质是追加写入，很少并发冲突。文件系统不仅简化部署，还降低维护成本。案例搜索和关键词搜索数据分目录存储（json/ 和 json/cases/），组织清晰易维护。

亮点2：代码复用的智慧。新增"案例集锦"时，Claude没有从零编写，而是复用了"关键词搜索记录"的代码结构。创建新函数但保持相同命名规范和逻辑流程，既提高效率也保证了一致性。

暗点1：需求理解的被动性。Claude对需求的理解完全依赖我的自然语言描述，不会主动建议"是否需要联动功能"或"是否需要筛选功能"。需求的完整性仍需人来把控，AI是高效执行者而非产品设计者。

暗点2：人工判断的必要性。有3次是我主动发现问题并提出修正的——链接可点击性、删除功能、tab顺序。这些都是用户体验层面的细节，Claude不会自己发现改进空间。人的审美判断和产品思维在当前阶段仍不可替代。

五、经验总结与改进方向

经验1：用文档定义边界。我的CLAUDE.md虽然只有4条规则，但定义了清晰边界。下次我会增加"性能要求"和"错误处理规范"，进一步提高代码质量。比如"所有API接口必须返回统一的JSON格式"、"错误提示必须用户友好"。

经验2：小步快跑，快速验证。71分钟7次提交的节奏证明了快速迭代的价值。每次只提一个明确需求，等Claude完成后立即验证，再提下一个。这比"一次提出所有需求"更高效，避免了因理解偏差导致的大规模返工。

经验3：保留人工判断空间。我没有让Claude完全自主决定产品形态，而是在关键节点介入：调整tab顺序、新增删除功能、修改页面标题。这些决策体现了对用户需求的深度理解。AI是工具，产品的灵魂仍来自人的判断。

改进方向：下次开发时，我会在提交初始需求时同步要求"为每个接口编写测试用例"。这次虽然生成了149行测试代码（search_test.py），但未在开发过程中持续运行。自动化测试可以更早发现潜在问题。另外，系统缺少性能监控机制（响应时间、Token趋势、错误率），下次会要求集成基础的日志和监控功能。

六、快速上手指南

想要复现这个过程，需要准备：1）一台Linux服务器（我用的是Linode，2核4G配置）；2）安装Claude Code CLI工具；3）获取Kimi AI的API密钥；4）在项目根目录创建CLAUDE.md配置文件。

提需求的技巧：用自然语言描述功能，但要包含关键要素——目标用户、核心功能、技术约束、预期效果。比如"需要一个搜索网站，支持实时推送结果，用户可以查看历史记录并删除"。避免过于宽泛的描述如"做一个好用的网站"，也不要过度细节如"用React Hook实现状态管理"。让AI在约束内自由发挥，往往会有意外收获。

结语

这次71分钟的实战，让我再次确信用结构化需求驱动AI开发的价值。即使是非技术背景的管理者，也能借助Claude Code快速构建生产级应用。AI不会取代程序员，但它正在重新定义"编程"——从编写代码变为设计系统和定义约束。关键在于，你要清楚地知道自己想要什么，并用清晰的语言表达出来。

---

附录：完整交互日志（共10个Session，17次关键交互）

Session 1 (10:21-11:01) - 前期调研阶段

10:21 | 第1次交互

我：搜索5个最流行的开源爬虫项目，告诉我星标数量，用于以下需求：产品需求文档。A产品名称：友商市场活动的竞争分析，产品经理James，架构师Jack，版本号0.1，项目的核心目标: 分析友商的市场活动和联合PR

Claude：搜索推荐5个开源爬虫项目（Scrapy、Beautiful Soup等），提供星标数据，分析各项目特点，为竞争分析系统选型提供依据。

10:58 | 第2次交互

我：查看系统环境变量，验证测试kimi api搜索功能

Claude：检查环境变量KIMI_API_KEY，验证API配置正确，确认moonshot模型可用。

---

Session 2 (14:02-14:20) - 核心功能开发阶段 ⭐

14:02 | 第3次交互

我：搜索网上信息，告诉我是否可以使用kimi api搜索网上信息并返回，如何设置模型和端点，think

Claude：研究Kimi API文档，确认moonshot-v1-32k模型支持联网搜索（web_search功能），提供端点配置方案和参数说明。

14:06 | 第4次交互

我：使用系统环境变量里面的kimi api进行搜索测试，搜索"亚马逊六页纸作者"相关信息，think，相关代码和文件放在./kimi

Claude：创建kimi目录，编写测试代码调用API，成功返回搜索结果并提取参考链接，验证联网搜索功能可用。

14:08 | 第5次交互

我：搜索结果输出到./kimi/{关键词}.md

Claude：实现搜索结果按关键词自动分类存储，创建Markdown文件保存内容、链接、元数据。

14:20 | 第6次交互

我：写一个页面search.html，使用nginx配置域名search.linapp.fun并配置ssl证书，后端调用以上代码，使用端口38001，编写kimisearch.py，在html页面流式显示搜索过程，返回搜索结果和引用的最相关的5个网页链接，页面风格使用akamai公司logo配色

Claude：一次性生成完整系统（11个文件2413行代码）：search.html前端、kimisearch.py后端、nginx配置、SSL证书脚本。实现SSE流式传输、Akamai红色配色、5个参考链接提取、Markdown渲染。

---

Session 3 (14:38-15:05) - 用户体验增强阶段 ⭐

14:42 | 第7次交互

我：网页标题从"Kimi Search"改为"云计算情报网"，"基于 Kimi AI 的智能联网搜索引擎"改为"基于AI大模型的云计算智能情报搜索系统"

Claude：修改品牌名称和页面文案，强化云计算垂直定位，更新元数据和页面标题。

14:47 | 第8次交互

我：增强用户体验，搜索使用20秒倒计时和进度条（可以提前完成）进度条下面显示具体步骤；首页显示过去三个历史搜索内容，点击可以直接打开；所有历史搜索放在data目录，data目录下面是关键词相同的文件夹，文件夹里存储具体信息；除了内容、链接、token使用、搜索时间外，还需要搜索网上信息，根据kimi api（带搜索功能）的单价估算本次搜索价格，think

Claude：实现20秒倒计时动画、0-100%进度条、5个里程碑步骤（初始化→联网搜索→获取结果→解析内容→提取链接）、首页历史卡片、JSON结构化存储、价格计算（¥0.024/1K tokens）。

15:05 | 第9次交互

我：1可以；2。需要处理成普通字符；3后台保留全部，设置一个专门的"历史搜索"TAB子页面，显示全部（每页20个）；价格显示人民币，显示小数点后面3位

Claude：新增TAB切换页面，实现分页功能（每页20条），价格格式化为¥0.000，优化数据存储结构。

---

Session 4 (15:17) - Git初始提交 ✅

15:17 | 第10次交互

我：进入kimi目录阅读readme

Claude：读取项目文档，确认功能完整性，执行git初始提交（v2.0，2413行代码）。

---

Session 5 (15:43) - 自主修复阶段 🤖

15:43 | 第11次交互（Claude自主）

Claude自主修复：无需我介入，Claude发现代码中的f-string语法错误（"unhashable type: 'dict'"），分析根因后立即提交修复版本v2.1。同时新增/history/stats接口，优化历史记录为卡片式布局，完善错误处理。

15:43 | 第12次交互

我：更新页面标题为"云资讯搜索网"

Claude：修改search.html中的标题文案，将search_test.py测试脚本加入版本控制。

15:52 | 第13次交互

我：改进参考链接的可点击性和视觉效果

Claude：增强用户体验，标题和URL均可点击，添加外部链接箭头图标（↗），改进hover效果（颜色、背景变化），添加安全属性rel="noopener noreferrer"，扩大可点击区域。

15:53 | 第14次交互

我：新增历史记录删除功能

Claude：后端实现DELETE /history/{file_name}接口，前端在卡片右上角添加删除按钮（✕），弹出确认对话框防止误删，删除后自动刷新列表。

---

Session 6 (15:57-16:02) - 案例搜索功能开发 ⭐

16:01 | 第15次交互

我：在"关键词搜索\n📚 历史记录"的基础上，增加"案例搜索"TAB，这是一个高级搜索页面，增加几个选项，让搜索结果更加精准，需要设计具体的提示词，服务于云计算行业的客户，解决他们需要搜索云计算行业案例的问题，一个参数是"厂商"用户通过下拉菜单选择aws，gcp，azure，alicloud，tencentcloud，digitalocean、行业"内置8个常见云计算行业，一个参数是具体技术"数据库、容器等"，可以默认为空，然后通过三种不同组合调用关键词，调用kimi+设计好的提示词返回对应搜索结果；你需要先问我几个问题（选择题或者问答题），明确我的需求，然后再开始修改，ultrathink

Claude：提出澄清问题后开发案例搜索TAB，实现厂商下拉菜单、行业选择器、技术过滤器、智能提示词生成、案例搜索结果展示，新增后端接口和数据存储。

---

Session 7 (16:24-16:28) - 最终优化阶段

16:24 | 第16次交互

我：调整🔍关键词搜索、📊案例搜索、📚历史记录三个tab的顺序，把案例搜索放在最前面

Claude：重构tab导航顺序（案例搜索→关键词搜索→历史记录），修改默认显示页面，更新JavaScript事件绑定索引，涉及1149行代码修改，2分钟完成。

16:28 | 第17次交互

我：增加一个tab"案例集锦"在"案例搜索"后面，用卡片显示所有搜索过的案例，逻辑和"历史记录"一样可删除；"历史记录"改为"关键词搜索记录"

Claude：新增完整的案例集锦模块（262行代码），包含统计仪表盘、分页列表、删除功能。复用历史记录代码结构，保持命名一致性，重命名术语，调整tab顺序为4个页面。

---

欢迎加我好友，一起探索Claude Code的高效用法

---